@import "./iconfont.scss";

// 重写 checkbox 样式
// 未选中的 背景样式 
checkbox .wx-checkbox-input {
	border-radius: 4px;
	/* 圆角 */
	width: 30rpx;
	/* 背景的宽 */
	height: 30rpx;
	/* 背景的高 */
	background-color: transparent;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	border: 1px solid #ff5722 !important;
	background: #ff5722 !important;
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	border-radius: 4px;
	/* 圆角 */
	width: 30rpx;
	/* 选中后对勾大小，不要超过背景的尺寸 */
	height: 30rpx;
	/* 选中后对勾大小，不要超过背景的尺寸 */
	line-height: 30rpx;
	text-align: center;
	font-size: 24rpx;
	/* 对勾大小 24rpx */
	color: #fff;
	/* 对勾颜色 白色 */
	background: transparent;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
radio .wx-radio-input {
	border-radius: 50%;
	/* 圆角 */
	width: 30rpx;
	height: 30rpx;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked {
	border: 1px solid #ff5722 !important;
	background: #ff5722 !important;
}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before {
	border-radius: 50%;
	/* 圆角 */
	width: 30rpx;
	/* 选中后对勾大小，不要超过背景的尺寸 */
	height: 30rpx;
	/* 选中后对勾大小，不要超过背景的尺寸 */
	line-height: 30rpx;
	text-align: center;
	font-size: 20rpx;
	/* 对勾大小 30rpx */
	color: #fff;
	/* 对勾颜色 白色 */
	background: transparent;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

// common.css
$style: #e5373b;

// .header{
// 	width: 100%;
// 	height: ;
// }

.color-black {
	color: #000 !important;
}

.color-red {
	color: #e5373b !important;
}

.color-gray {
	color: #999 !important;
}


.end-tip {
	padding: 28rpx 32rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999;
}

.order-goods-item {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 32rpx 0;

	.img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 6rpx;
		overflow: hidden;
		flex-shrink: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.texts {
		width: 100%;
		margin-left: 19rpx;

		.title {
			width: 100%;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #000;
			height: 80rpx;
		}

		.sku {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}

		.bot {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.price {
				font-size: 24rpx;
				color: $style;
				font-weight: bold;

				span {
					font-size: 32rpx;
					line-height: 32rpx;
				}
			}

			.num {
				color: #999;
			}
		}
	}
}

.redu-num-add {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 186rpx;
	height: 40rpx;
	&.status1{
		.btn{
			width: 32rpx;
			height: 32rpx;
			background-color: #fff;
		}
		input{
			width: 72rpx;
			font-size: 24rpx;
			font-weight: bold;
		}
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		// border-radius: 50rpx;
		// background-color: #333;
		color: #fff;
		flex-shrink: 0;
		.add__img {
			width: 40rpx;
			height: 40rpx;
		}
		i {
			font-size: 20rpx;
		}

		&.disabled {
			// background-color: #f4f4f4;
			color: #999;
		}
	}

	input {
		width: 66rpx;
		height: 4rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}
}

.common-empty {
	padding: 56rpx 0;

	&.fixed {
		width: 100%;
		position: fixed;
		top: 40%;
		z-index: 1;
		transform: translateY(-50%);
	}

	.img {
		margin: 0 auto;
		width: 255rpx;

		image {
			width: 100%;
		}
	}

	.text {
		color: #ccc;
		margin-top: 54rpx;
		text-align: center;
	}
}

// reset.css
page,
input,
button,
textarea,
blockquote {
	margin: 0;
	padding: 0;
}

page {
	color: #333;
	font-size: 28rpx;
	font-family: "PingFang", "PingFang SC", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}


h1 {
	font-size: 40rpx
}

h2 {
	font-size: 36rpx
}

h3 {
	font-size: 32rpx
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

image {
	border: none;
	vertical-align: middle;
	max-width: 100%;
}

input,
textarea,
select,
button {
	border-radius: 0;
	border: none;
	background-color: #fff;
	font: 28rpx "PingFang", "PingFang SC", "Microsoft YaHei", "黑体", "宋体", sans-serif;
	outline: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button:not(.default-button) {
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	text-align: center;
	font-size: 28rpx !important;
}

table {
	border-collapse: collapse;
}

/*公共类*/
.clearfix {
	zoom: 1;
}

.clearfix:after,
.clearfix:before {
	content: "";
	display: table;
	clear: both;
}

.fl {
	float: left !important;
}

.fr {
	float: right !important;
}

.al {
	text-align: left !important;
}

.ac {
	text-align: center !important;
}

.ar {
	text-align: right !important;
}

.hide {
	display: none !important;
}

.show {
	display: block !important;
}

.mt0 {
	margin-top: 0 !important;
}

.mt10 {
	margin-top: 10rpx !important;
}

.mt15 {
	margin-top: 15rpx !important;
}

.mt20 {
	margin-top: 20rpx !important;
}

.mt30 {
	margin-top: 30rpx !important;
}

.mt40 {
	margin-top: 40rpx !important;
}

.mt50 {
	margin-top: 50rpx !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.mb10 {
	margin-bottom: 10rpx !important;
}

.mb20 {
	margin-bottom: 20rpx !important;
}

.mb30 {
	margin-bottom: 30rpx !important;
}

.mb40 {
	margin-bottom: 40rpx !important;
}

.mb50 {
	margin-bottom: 50rpx !important;
}

.ml0 {
	margin-left: 0 !important;
}

.ml10 {
	margin-left: 10rpx !important;
}

.ml20 {
	margin-left: 20rpx !important;
}

.ml30 {
	margin-left: 30rpx !important;
}

.ml40 {
	margin-left: 40rpx !important;
}

.ml50 {
	margin-left: 50rpx !important;
}

.mr0 {
	margin-right: 0 !important;
}

.mr10 {
	margin-right: 10rpx !important;
}

.mr20 {
	margin-right: 20rpx !important;
}

.mr30 {
	margin-right: 30rpx !important;
}

.mr40 {
	margin-right: 40rpx !important;
}

.mr50 {
	margin-right: 50rpx !important;
}

.over-line1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.over-line2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.over-line3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.over-line4 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.over-line5 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

.list-not {
	margin-top: 276rpx;

	.listnoImg {
		width: 255rpx;
		height: 234rpx;
		margin: 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.list-not-text {
		font-size: 28rpx;
		color: #CCCCCC;
		text-align: center;
		margin-top: 55rpx;
	}
}

navigator {
	&.navigator-hover {
		background-color: initial;
		opacity: 1;
	}
}

.my-list1 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 690rpx;
	margin: 0 auto;

	.item {
		width: 330rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.item-img {
		height: 330rpx;
	}

	.item-info {
		padding: 25rpx 20rpx 30rpx;
	}

	.item-title {
		font-size: 28rpx;
		line-height: 38rpx;
		height: 38rpx;
		margin-bottom: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 1;
		font-size: 24rpx;
	}

	.item-price {
		display: flex;
		align-items: center;
		flex-grow: 1;
		width: 0;
		text {
			font-weight: bold;
			color: #DD423F;
			font-size: 32rpx;
			line-height: 1rpx;
		}
		.item-unit {
			display: flex;
			align-items: flex-end;
			font-weight: normal;
			color: #333333;
			font-size: 24rpx;
			line-height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.item-num {
		color: #666666;
		flex-shrink: 0;
	}
}

.end-loading{
	padding: 28rpx 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #999999;
	image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 23rpx;
		animation: loading 1s linear infinite;
	}
	@keyframes loading {
		from{
			transform: rotate(0);
		}
		to{
			transform: rotate(360deg);
		}
	}
}
.my-modal{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 0px;
	overflow: hidden;
	z-index: -1;
	display: flex;
	align-items: flex-end;
	&.active{
		bottom: 0;
		height: auto;
		z-index: 2000;
		.modal-mask{
			display: block;
		}
		.modal-container{
			transform: translateY(0);
		}
	}
	.modal-mask{
		display: none;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}
	.modal-container{
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;
		padding: 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		box-sizing: border-box;
		width: 100%;
		position: relative;
		z-index: 4;
		transform: translateY(100%);
		transition: all 0.3s;
	}
}